<template>
  <a-card class="ax__template SystemDept" :body-style="bodyStyle">
    <a-flex vertical class="h-100">
      <!-- 顶部筛选，查询选项 -->
      <HeadVue />
      <!-- loading效果 -->
      <!-- 中间数据 -->
      <div class="data__content">
        <TableVue v-if="deptTable.viewMode === 'table'" data-selection-exclude></TableVue>
        <CardVue v-else></CardVue>
      </div>
      <!-- 底部分页信息 -->
      <FooterVue></FooterVue>

      <!-- 绝对定位模块 -->
      <!-- 表单编辑 -->
      <FormVue />
    </a-flex>

    <!-- end -->
  </a-card>
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import { deptList } from './data/curd';
import { statusOptionsFetch } from './data/options';
import { deptTable } from './data/table';
import FooterVue from './pages/components/AXFooter.vue';
import FormVue from './pages/components/AXForm.vue';
import HeadVue from './pages/components/AXHead.vue';
import CardVue from './pages/table-card/AXCard.vue';
import TableVue from './pages/table-card/AXTable.vue';

onMounted(async () => {
  await deptList();
  await statusOptionsFetch();
});

onUnmounted(() => {
  deptTable.value.reset();
});
</script>

<style lang="scss" scoped></style>
